<template>
	<view class="club">
		<view class="server">
			<view class="server_box">
				<image src="https://hdsq.aoorange.cn/attachment/xcx/icon/search.png" mode="aspectFit"></image>
				<input type="text" placeholder-style="color:#CCCCCC" placeholder="输入团购名称搜索" v-model="pageParam.keyword" />
			</view>
			<text @click="search()">搜索</text>
		</view>
		<div class="content">
			<div class="tabbar">
				<div @click="showmodel(index,0)" v-for="(item, index) in navList" :key="index" :class="index==selnav ? 'check' : ''">
					<text class="oneline">{{item.selname?item.selname:item.name}}</text>
					<view class="down" style="left:70%;"></view>
				</div>
			</div>
			<div class="list">
				<div class="item" v-for="(item,index) in pageResult.list" :key="index" @click="jump('group_view', item.id+'&merchantId='+item.merchant_id)">
					<div class="left">
						<image :src="item.picture"></image>
					</div>
					<div class="right">
						<view class="right_con">
							<text class="oneline name">{{item.title}}</text>
						</view>
						<view class="right_con">
							<text class="oneline rule">{{item.rule_name}}</text>
						</view>
						<view class="right_con">
							<text class="rate">{{item.price > 0 ? '¥'+item.price : ''}}{{item.price > 0 && item.integral > 0 ? ' + ' : ''}}{{item.integral > 0 ? item.integral+'积分' : ''}}</text>
							<text class="km">{{ item.market_price }}</text>
						</view>
						<view class="group_bot">立即兑换</view>
					</div>
				</div>
			</div>
		</div>
		<uni-popup ref="popup" maskClick="false" type="top">
			<div class="content">
				<div class="tabbar">
					<div @click="showmodel(index,1)" v-for="(item, index) in navList" :key="index" :class="index==selnav ? 'check' : ''">
						<text class="oneline">{{item.name}}</text>
						<view :class="index==selnav?'up':'down'" style="left:70%;"></view>
					</div>
				</div>
				<view class="popup_type" v-if="selnav==0">
					<view :class="index==navList[0].selkey?'sel':''" @click="selSearch(index, item)" v-for="(item,index) in typeList" :key="index">
						{{item.itemName}}
					</view>
				</view>
				<view class="popup_type" v-if="selnav==1">
					<view :class="index==navList[0].selkey?'sel':''" @click="selSearch(index, item)" v-for="(item,index) in rangeList" :key="index">
						{{item.itemName}}
					</view>
				</view>
			</div>
		</uni-popup>
	</view>
</template>

<script>
	import serve from '../static/request.js';
	import storage from '../static/appkey.js';
	import common from '../static/jump.js';
	export default {
		data() {
			return {
				navList: [{
					name: "类型",
					selname: "",
					selkey: 0,
				},{
					name: "积分范围",
					selname: "",
					selkey: 0,
				}],
				typeList: [
					{itemId: '0', itemName: '全部'},
					{itemId: '1', itemName: '纯积分'},
					{itemId: '2', itemName: '非积分'},
				],
				rangeList: [
					{itemId: '0', itemName: '全部'},
					{itemId: '1', itemName: '0-500'},
					{itemId: '2', itemName: '500-1000'},
					{itemId: '3', itemName: '1000-2000'},
					{itemId: '4', itemName: '2000以上'},
				],
				selnav: 0,
				pageParam: {
					appkey: uni.getStorageSync('appkey'),
					merchantId: 0,
					page: 0,
					keyword: '',
					typeId: 0,
					rangeId: 0,
					pageSize: 10
				},
				pageResult: {
					list: [],
					isEmpty: false,
					isEnd: false,
				},
			}
		},
		methods: {
			getnav(index) {
				this.selnav = index
			},
			selSearch(key, val) {
				console.info(val.itemName);
				this.navList[this.selnav].selname = val.itemId == 0 ? "" : val.itemName;
				if(this.selnav == 0) {
					this.pageParam.typeId = val.itemId;
				} else if (this.selnav == 1) {
					this.pageParam.rangeId = val.itemId;
				} 
				this.close();
			},
			subCateFun(item) {
				this.pageParam.cateId = item.itemId;
				let key = this.navList[1].selkey;
				var cateItem = this.cateList[key];
				this.navList[this.selnav].selname = cateItem.itemName;
				this.close(2);
			},
			open() {
				this.$refs.popup.open()
			},
			close() {
				this.pageParam.page = 0;
				this.pageResult.list = [];
				this.getList();
				this.$refs.popup.close()
			},
			showmodel(index, type) {
				if (type == 0) {
					this.selnav = index;
					this.open();
					return ;
				}
				if(this.selnav == index){
					this.close(1);
					return ;
				} else {
					this.selnav = index;
					this.open();
					return ;
				}
			},
			search() {
				this.pageParam.page = 0;
				this.pageResult.list = [];
				this.getList();
			},
			getList() {
				var self = this;
				self.pageParam.page ++;
				serve
					.request({
						url: '/marketing/group-purchase/index',
						data: self.pageParam
					})
					.then(res => {
						if (res.data && res.data.length > 0) {
							self.pageResult.list = self.pageResult.list.concat(res.data);
						}
						self.pageResult.isEmpty = self.pageResult.list.length == 0;
						self.pageResult.isEnd = res.data.length == 0;
					});
			},
			jump(jump_type, jump_link) {
				common.jump(jump_type, jump_link);
			}
		},
		onLoad(option) {
			this.pageParam.merchantId = option.merchantId || 0;
			this.pageParam.page = 0;
			this.pageResult.list = [];
			this.getList();
		},
		onShow() {
			this.getList();
		},
		onPullDownRefresh() {
			this.pageParam.keyword = '';
			this.pageParam.typeId = 0;
			this.pageParam.rangeId = 0;
			this.pageParam.page = 0;
			this.pageResult.list = [];
			this.getList();
		},
		onReachBottom() {
			if (this.pageResult.isEnd || this.pageResult.isEmpty) {
				return
			}
			this.getList()
		}
	}
</script>

<style scoped lang="scss">
	.club {
		.server {
			box-sizing: border-box;
			padding: 48upx 30upx;
			background: #FFFFFF;
			width: 100%;
			display: flex;
			align-items: center;
			border-bottom: 1upx rgba(204, 204, 204, 0.3) solid;

			.server_box {
				display: flex;
				align-items: center;
				width: 560upx;
				height: 72upx;
				background: rgba(245, 245, 245, 1);
				border-radius: 36upx;

				image {
					width: 22upx;
					height: 22upx;
					margin-left: 116upx;
				}

				input {
					margin-left: 20upx;
					font-size: 24upx;
				}
			}

			text {
				color: rgba(255, 188, 0, 0.91);
				font-size: 32upx;
				margin-left: 47upx;
			}
		}

		.content {
			.popup_type {
				width: 100%;
				background: #FFFFFF;
				padding-bottom: 91upx;

				view {
					padding-left: 30upx;
					padding-top: 67upx;
					color: #666666;
					font-size: 32upx;
				}

				.sel {
					color: #333333;
				}
			}

			.popup_type1 {
				width: 100%;
				background: #FFFFFF;
				display: flex;

				.popup_type_left {
					max-height: 921upx;
					width: 260upx;
					background: #FFFFFF;
					text-align: center;

					view {
						height: 100upx;
						line-height: 100upx;
						font-size: 32upx;
						color: #999999;
					}

					.sel {
						width: 100%;
						background: #F7F7F7;
					}
				}

				.popup_type_right {
					max-height: 921upx;
					width: 490upx;
					background: #F7F7F7;

					view {
						padding: 55upx 58upx;
						font-size: 28upx;
						display: flex;
						align-items: center;

						text:nth-child(1) {
							color: #333333;
							width: 200upx;
						}

						text:nth-child(2) {
							color: #999999;
							margin-left: 30upx;
							max-width: 200upx;
						}
					}
				}
			}

			.popup_type2 {
				box-sizing: border-box;
				background: #FFFFFF;

				.line {
					.title {
						display: flex;
						align-items: center;
						padding: 28upx 36upx 0upx;

						text:nth-child(1) {
							font-size: 32upx;
							color: #333333;
						}

						text:nth-child(2) {
							font-size: 20upx;
							color: #FFFFFF;
							padding: 2upx 8upx;
							background: #EB5938;
							margin-left: 10upx;
						}
					}

					.line_con {
						display: flex;
						align-items: center;
						flex-wrap: wrap;

						view {
							margin: 27upx 0upx 27upx 28upx;
							width: 220upx;
							height: 72upx;
							border-radius: 36upx;
							background: #F5F5F5;
							display: flex;
							flex-wrap: wrap;
							justify-content: center;
							align-items: center;
							font-size: 28upx;
							color: #999999;

							image {
								width: 28upx;
								height: 28upx;
								margin-right: 10upx;
							}
						}

						.sel {
							background: rgba(255, 249, 232, 1);
							border: 1upx solid rgba(255, 188, 0, 1);
							color: #FFBC00;
						}
					}

				}
			    .line_bot{
					width: 100%;
					display: flex;
					view:nth-child(1){
						width:50%;
						height:90upx;
						text-align: center;
						line-height: 90upx;
						font-size:32upx;
						color: #999999;
						background:#F1F1F1;
					}
					view:nth-child(2){
						width:50%;
						height:90upx;
						text-align: center;
						line-height: 90upx;
						font-size:32upx;
						color: #FFFFFF;
						background:rgba(255,188,0,1);
					}
				}
			}

			.tabbar {
				width: 100%;
				height: 91upx;
				box-sizing: border-box;
				display: flex;
				background: #FFFFFF;
				border-bottom: 1upx rgba(204, 204, 204, 0.3) solid;

				div {
					position: relative;
					color: #999999;
					font-size: 32upx;
					line-height: 91upx;
					width: 50%;
					display: flex;
					justify-content: center;
					align-items: center;

					// text {
					// 	max-width: 200upx;
					// }

					.down {
						position: absolute;
						top: 40upx;
						width: 0px;
						height: 0px;
						border-width: 12upx;
						border-style: solid;
						border-color: #B5B5B5 transparent transparent transparent;
					}

					.up {
						position: absolute;
						top: 30upx;
						width: 0px;
						height: 0px;
						border-width: 12upx;
						border-style: solid;
						border-color: transparent transparent #FFBC00 transparent;
					}
				}

				.check::after {
					content: "";
					display: block;
					position: absolute;
					bottom: 0;
					left: 43%;
					width: 30upx;
					height: 7upx;
					background: rgba(255, 188, 0, 1);
					border-radius: 3px;
				}

				.check {

					color: #232323;
					// background: url(https://hdsq.aoorange.cn/attachment/xcx/index/icon_index_tabbar_check.png) no-repeat center 66upx;
					// background-size: 78upx auto;
				}
			}

			.list {
				.item {
					display: flex;
					box-sizing: border-box;
					align-items: flex-start;
					padding: 42upx 32upx;
					border-bottom: 1px solid #ebebeb;

					.left {
						margin-right: 15upx;

						image {
							width: 220upx;
							height: 180upx;
						}
					}

					.right {
						flex: 1;

						.right_con {
							display: flex;
							align-items: center;
							position: relative;

							.name {
								max-width: 300upx;
								font-size: 34upx;
								font-weight: bold;
							}
							
							.rule {
								max-width: 300upx;
								font-size: 30upx;
							}
							
							.state {
								padding: 5upx 8upx;
								text-align: center;
								color: #FFFFFF;
								font-size: 20upx;
								border-radius: 2upx;
								margin-left: 10upx;
							}

							.rate {
								color: #FFBC00;
								font-size: 30upx;
							}

							.km {
								color: #999999;
								position: absolute;
								right: 0upx;
								font-size: 30upx;
								text-decoration: line-through;
							}

							.discounts {
								font-size: 20upx;
								color: #EB5938;
								margin-left: 7upx;
							}
						}

						.right_con:nth-child(2) {
							padding: 10upx 0upx;
						}
						
						.group_bot{
							width: 200upx;
							margin-top: 20upx;
							line-height: 48upx;
							text-align: center;
							color: #FFFFFF;
							font-size: 24upx;
							background: rgba(235, 89, 56, 1);
							border-radius: 24upx;
						}
					}
				}
			}
		}


	}
</style>
